<template>
  <div
    class="home"
    :style="{
      '--h-width': width,
    }"
  >
    <div class="home-header">
      <ly-header />
    </div>
    <div class="home-container">
      <div class="home-container-lt">
        <div class="home-container-lt-title">
          <div>hello！<br />欢迎进入甘肃省互联网+农业社会化服务平台</div>
        </div>
        <div class="home-container-lt-business">
          <el-carousel
            height="105px"
            :interval="5000"
            :autoplay="false"
            indicator-position="none"
            arrow="always"
          >
            <el-carousel-item
              class="home-container-lt-business-wrap"
              v-for="(item, index) in business"
              :key="index"
            >
              <template v-for="cItem in item">
                <dl
                  :class="[
                    'home-container-lt-business-list',
                    cItem.child?.length ? 'default' : 'disabled',
                  ]"
                  @click="jumpToBusiness(cItem)"
                >
                  <dt>
                    <img
                      v-if="cItem.child && cItem.child?.length"
                      :src="
                        require('@/assets/images/apply/' + cItem.icon + '.png')
                      "
                    />
                    <img
                      v-else
                      :src="
                        require('@/assets/images/apply/' +
                          cItem.icon +
                          'No.png')
                      "
                    />
                  </dt>
                  <dd>
                    <h1>
                      {{ cItem.menuName
                      }}<span v-if="!cItem.child?.length">未授权</span>
                    </h1>
                    <p>农业社会化服务平台</p>
                  </dd>
                </dl>
              </template>
              <template v-for="i in number - item.length">
                <dl></dl>
              </template>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="home-container-lt-apply">
          <h1>应用管理</h1>
          <div class="home-container-lt-apply-wrap">
            <dl
              class="home-container-lt-apply-list"
              v-for="(item, index) in apply"
              :key="index"
              @click="jump(item)"
            >
              <dt><img :src="item.imgUrl" /></dt>
              <dd>{{ item.name }}</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="home-container-rt">
        <div class="home-container-rt-user">
          <h1>
            {{ userInfo.userName }}<span>{{ userInfo.workPost }}</span>
          </h1>
          <p>上次登录时间：{{ userInfo.lastLoginTime }}</p>
          <dl>
            <dt>{{ weather.temperature }}℃</dt>
            <dd>
              <div>
                {{ weather.weather }}<span>{{ weather.week }}</span>
              </div>
              <div>
                {{ weather.province }} {{ weather.city
                }}<span>{{ weather.date }}</span>
              </div>
            </dd>
          </dl>
        </div>
        <div class="home-container-rt-info">
          <h1>待办<span @click="more()">查看更多>></span></h1>
          <ul v-if="message?.length">
            <li
              v-for="(item, index) in message"
              :key="index"
              @click="more(item)"
            >
              <p>{{ item.title }}</p>
              <span>{{ item.addTime }}</span>
            </li>
          </ul>
          <el-empty v-else description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lyHeader from './../../layout/header/index.vue'
import Base64 from 'base-64'
export default {
  name: 'index',
  components: {
    lyHeader,
  },
  data() {
    return {
      width: window.screen.width - 20 + 'px',
      number: window.screen.width > 1919 ? 5 : 4,
      userInfo: {
        userName: this.$crypto.decrypt(
          Base64.decode(JSON.parse(sessionStorage.userInfo).userName)
        ),
        workPost: JSON.parse(sessionStorage.userInfo).workPost,
        lastLoginTime: JSON.parse(sessionStorage.userInfo).lastLoginTime,
      },
      business: [],
      apply: [],
      weather: {
        temperature: 24,
        weather: '多云',
        province: '甘肃',
        city: '兰州',
        week: '星期六',
        date: '2023/07/15',
      },
      date: new Date(),
      message: [],
    }
  },
  created() {
    //初始化标签页
    this.$store.dispatch('tags/addVisitedRoute')
    this.getBusiness()
    this.getApply()
    this.weatherList()
    this.msgList()
  },
  methods: {
    getApply() {
      // 获取第三方应用
      this.getData('/admin/app/listApp', 'apply')
    },
    getBusiness() {
      // 获取业务列表
      this.getData('/admin/menu/listMyMenus', 'business')
    },
    getData(url, key) {
      this.$axios.get(url).then((data) => {
        if (data.code == 200) {
          if (key == 'business') {
            this.business = this.groupArray(data.data, this.number)
          } else {
            this[key] = data.data
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    jumpToBusiness(item) {
      sessionStorage.menus = JSON.stringify(item.child)
      this.$router.push(item.child[0].url)
    },
    jump(item) {
      // 跳转应用
      if (item.flag) {
        this.$axios.get(item.mainUrl).then((data) => {
          if (data.code == 200) {
            window.open(data.data)
          } else {
            this.$message.error(data.msg)
          }
        })
      } else {
        this.$message.error('当前账号没有该系统权限，请联系管理员处理！')
      }
    },
    weatherList() {
      //天气信息
      this.$axios
        .get('/admin/theme/getWeatherByIp?extensions=base')
        .then((data) => {
          if (data.code == 200) {
            this.weather = data.data.lives[0] || {}
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    msgList() {
      //待办
      this.$axios
        .post('/admin/messsage/myMessagePage', {
          pageNum: 1,
          pageSize: 6,
          param: {},
        })
        .then((data) => {
          this.message = []
          if (data.code == 200) {
            this.message = data.data.list
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    more(row) {
      //更多
      if (!row) {
        this.$router.push('/home/backlog')
      } else {
        if (row.type == 2) {
          this.$router.push({
            path: '/home/backlog/detail',
            query: {
              id: row.id,
              runTaskId: row.runTaskId,
              linkId: row.linkId,
              type: 'home',
            },
          })
        } else {
          this.$router.push({
            path: '/home/backlog/notice',
            query: { id: row.id, type: 'home' },
          })
        }
      }
    },
    groupArray(arr, length) {
      let result = []
      let index = 0
      while (index < arr.length) {
        result.push(arr.slice(index, index + length))
        index += length
      }
      return result
    },
  },
}
</script>
<style lang="scss" scoped>
.home {
  min-height: 100vh;
  min-width: var(--h-width);
  background: #f6f6f6;
  &-container {
    padding: 20px 28px;
    display: flex;
    &-lt {
      flex: 1;
      display: grid;
      grid-template-rows: 458px 145px;
      &-title {
        height: 458px;
        background-color: #fff;
        position: relative;
        div {
          font-size: 42px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #393939;
          position: absolute;
          z-index: 2;
          top: 160px;
          left: 70px;
        }
      }
      &-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: -7px;
        width: 281px;
        height: 185px;
        background: url(~@/assets/images/title-lt.png);
        background-size: 100% 100%;
      }
      &-title::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 677px;
        height: 458px;
        background: url(~@/assets/images/title-rt.png);
        background-size: 100% 100%;
      }
      &-business {
        margin: 20px 0;
        &-wrap {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        &-list {
          border: 1px solid #e9eaf8;
          display: flex;
          height: 105px;
          margin: 0 7px;
          box-sizing: border-box;
          cursor: pointer;
          dt {
            width: 45px;
            height: 45px;
            margin: 30px 20px;
            img {
              width: 45px;
              height: 45px;
            }
          }
          dd {
            flex: 1;
            margin: 30px 0;
            h1 {
              font-size: 21px;
              font-family: PingFang SC;
              font-weight: 800;
              color: #000000;
              span {
                display: inline-block;
                width: 54px;
                height: 16px;
                line-height: 16px;
                background: #ee7f30;
                border-radius: 14px 7px 7px 0px;
                font-size: 10px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
              }
            }
            p {
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 800;
              color: #b0aeb6;
              margin-top: 7px;
            }
          }
        }
        &-list:first-child {
          margin-left: 0;
        }
        &-list:last-child {
          margin-right: 0;
        }
        &-list.default {
          background: #fff;
        }
        &-list.disabled {
          background: #f7f7f7;
          cursor: not-allowed;
          pointer-events: none;
        }
      }
      &-apply {
        min-height: calc(100vh - 703px);
        background: #fff;
        h1 {
          padding: 20px 0 0 51px;
          position: relative;
          width: 72px;
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #393939;
          line-height: 27px;
        }
        h1::after {
          content: '';
          position: absolute;
          left: 30px;
          top: 20px;
          width: 21px;
          height: 27px;
          background: url(~@/assets/images/apply_bg.png);
          background-size: 100% 100%;
        }
        &-wrap {
          margin: 15px 25px 0 25px;
        }
        &-list {
          width: 180px;
          margin: 15px 10px;
          display: inline-block;
          cursor: pointer;
          vertical-align: top;
          dt {
            text-align: center;
            img {
              width: 75px;
              height: 75px;
              border-radius: 10px;
            }
          }
          dd {
            text-align: center;
            margin-top: 15px;
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    &-rt {
      width: 362px;
      margin-left: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(362px, 1fr));
      grid-template-rows: 166px 292px;
      &-user {
        width: 362px;
        height: 166px;
        background: url(~@/assets/images/user_bg.png);
        background-size: 100% 100%;
        h1 {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          padding: 20px 0 0 22px;
          span {
            font-size: 12px;
            margin-left: 12px;
          }
        }
        p {
          font-size: 11px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          margin: 10px 0 0 22px;
        }
        dl {
          margin: 30px 22px 0 22px;
          display: flex;
          dt {
            font-size: 50px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
            opacity: 0.7;
          }
          dd {
            flex: 1;
            margin-left: 10px;
            div {
              font-size: 13px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
              opacity: 0.7;
              line-height: 25px;
              span {
                float: right;
              }
            }
          }
        }
      }
      &-date {
        height: 282px;
        background: #fff;
        padding: 0 10px 10px 10px;
        h1 {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          padding-left: 20px;
          color: #000000;
          border-bottom: 1px solid #f5f8f9;
          position: relative;
        }
        h1::after {
          content: '';
          position: absolute;
          left: 0;
          top: 11px;
          width: 15px;
          height: 15px;
          background: url(~@/assets/images/info.png);
          background-size: 100% 100%;
        }
        &-calendar {
          // /deep/.el-calendar-table tbody {
          //   background: #f5f8f9;
          //   padding-top: 10px;
          // }
          // /deep/.el-calendar-table tr,
          // /deep/.el-calendar-table td {
          //   border: none;
          // }
          // /deep/.el-calendar__header {
          //   padding: 10px 0;
          //   border-bottom: none;
          // }
          // /deep/.el-calendar__body {
          //   padding: 0;
          // }
          // /deep/.el-calendar-table thead th {
          //   padding: 0 0 10px 0;
          // }
          // /deep/.el-calendar-table .el-calendar-day {
          //   height: auto;
          //   padding: 6.3px 5px;
          //   text-align: center;
          // }
          // /deep/.el-calendar-table td.is-selected {
          //   /*color: #333333;*/
          //   /*background: #3377ff;*/
          //   /*border-radius: 5px;*/
          // }
          // /deep/.el-calendar-table td.is-today {
          //   color: #fff;
          //   background: #3377ff;
          //   border-radius: 5px;
          // }
          // /deep/.el-calendar-table td.is-today:hover {
          //   color: #3377ff;
          // }
        }
      }
      &-info {
        margin-top: 20px;
        background: #fff;
        padding: 10px;
        h1 {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          padding-left: 20px;
          color: #000000;
          border-bottom: 1px solid #f5f8f9;
          position: relative;
          span {
            float: right;
            font-size: 12px;
            color: #9b9b9b;
            cursor: pointer;
          }
        }
        h1::after {
          content: '';
          position: absolute;
          left: 0;
          top: 11px;
          width: 15px;
          height: 15px;
          background: url(~@/assets/images/info.png);
          background-size: 100% 100%;
        }
        ul {
          padding: 10px 15px;
          margin-top: 10px;
          li {
            padding: 20px 0 10px;
            cursor: pointer;
            border-bottom: 1px solid #f5f8f9;
            p {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #000000;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span {
              display: inline-block;
              width: 100%;
              text-align: right;
              font-size: 12px;
              color: #9b9b9b;
              margin-top: 5px;
            }
          }
          li:last-child {
            border: none;
          }
        }
      }
    }
  }
}
</style>
